<template>
	<view class="tui-addr-box">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<form :report-submit="true">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">产品名称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="name" v-model="infoData.name" placeholder="商品名称" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">商品价格</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="money" v-model="infoData.money" placeholder="商品价格 正整数 880" type="number" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">商品原价</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="money_old" v-model="infoData.money_old" placeholder="商品价格 正整数 1280" type="number" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">佳米抵扣</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="jia_mi" v-model="infoData.jia_mi" placeholder="最大可使用的佳米 正整数 默认为0" type="number" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">商品库存</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="stock" v-model="infoData.stock" placeholder="会议地址" type="number" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">排序</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="sort" v-model="infoData.sort" placeholder="排序" type="number" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">参与红包</view>
					<switch :checked="freeStatus" color="#47ce00" style="transform:scale(0.7)" @change="freeChange()" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">商品状态</view>
					<switch :checked="goodsStatus" color="#47ce00" style="transform:scale(0.7)" @change="statusChange()" />
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">商品图片</view>
					<tui-tag size="small" type="light-green" shape="circle" class="tui-right"
						@click="uploadPayImg('wechat')">点击上传商品图片LOGO 750*750px</tui-tag>
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0" v-if="showImg">
				<image class="qr-code" :src="imgUrl" />
				<view class="tui-right-del">
					<tui-tag size="10px" type="danger" padding="5px 10px" shape="circle" @click="removeImg()">删除</tui-tag>
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<!-- <view class="tui-title">商品详情</view> -->
					<textarea v-model="infoData.remark" class="tui-textarea tui-textarea-my" name="desc" placeholder="商品的详细介绍" maxlength="200" placeholder-class="tui-phcolor-color" />
				</view>
			</tui-list-cell>
			
			<!-- 保存地址 -->
			<view class="tui-addr-save" @click="postInfoEdit()">
				<tui-button type="green" height="88rpx">修改商品信息</tui-button>
			</view>
		</form>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	const util = require('../../utils/util.js')
	export default {
		components: {
			tuiButton,
			tuiListView,
			tuiListCell,
			footerMenu,
			tuiIcon,
			tuiTag
		},
		data() {
			return {
				infoData: {
					status: true,
					sort: 20,
					stock: 100,
				},
				name:'',
				phone: '',
				remark: '',
				
				
				imgUrl: '',
				showImg: false,
				
				meetId: 0,
				goodsStatus: false,
				freeStatus: false,
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
						{icon: "service", text: "发现", size: 24},
						{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/shop/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			statusChange: function() {
				if(this.goodsStatus){
					this.infoData.status = 2;
				}else{
					this.infoData.status = 1;
				}
				this.goodsStatus = !this.goodsStatus;
			//	console.log(this.infoData.status);
			//	console.log(e);
			},
			
			freeChange: function() {
				if(this.freeStatus){
					this.infoData.is_free_goods = 2;
				}else{
					this.infoData.is_free_goods = 1;
				}
				this.freeStatus = !this.freeStatus;
			//	console.log(this.infoData.status);
			//	console.log(e);
			},
			
			
			getDataInfo: function() {
				uni.request({
				    url: this.$apiUrl+ '/api/meet/goodsInfo?info_id='+ this.infoId,
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.infoData = resData;
						this.infoData.info_id = this.infoId;
						this.infoData.img_url = resData.img_logo;
						this.meetId = resData.meet_id;
						let status = resData.status;
						let isFreeStatus = resData.is_free_goods;
					//	console.log(status);
						if(resData.img_logo){
							this.imgUrl = resData.img_logo;
							this.showImg = true;
						}
						
						if(status == 1) {
							this.goodsStatus = true;
						}
						
						if(isFreeStatus == 1) {
							this.freeStatus = true;
						}
					}
				});
			},
			
			
			//默认地址
			doIsHomeSwitch: function(isHome){
				this.isHome = (isHome == 2) ? 1 : 2;
				console.log(this.isHome);
			},
			
			//保存收货地址
			postInfoEdit: function() {
				uni.request({
					method: 'POST',
					url: this.$apiUrl + '/api/meet/goodsEdit',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: this.infoData,
					success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						this.tui.toast(resMsg);
						if(resErr == 0 ){		//发送成功的时候
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/meet/goods-admin?info_id='+this.meetId
								});
							}, 1000)
						}
					}
				});
			},
			
			uploadPayImg() {
				// 使用uni.chooseImage选择图片
				uni.chooseImage({
					count: 1,
					success: chooseResult => {
						// 图片选择成功后，使用uni.uploadFile上传图片
						uni.uploadFile({
							url: this.$apiUrl + '/api/common/uploadImgLocal', // 您的上传地址
							filePath: chooseResult.tempFilePaths[0],
							name: 'file', // 服务器端接收文件的字段名
							formData: {
								'user': 'test' // 如果需要额外的信息，如用户ID等
							},
							success: (uploadResult) => {
								const data = JSON.parse(uploadResult.data);
								// 根据上传结果设置图片路径
								if (data.code === 200) { // 假设成功的标志是code为200
									this.imgUrl = data.url; // 假设返回的图片URL在data.url中
									this.showImg = true;
									this.infoData.img_url = data.url;
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传错误',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			
			//移除收款码
			async removeImg() {
				this.imgUrl = '';
				this.showImg = false;
			},
			
		},
		
		onLoad: function(options) {
			this.infoId = options.info_id || 0;
			this.getDataInfo();
			this.infoData.info_id = this.infoId;
		},
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-input {
		width: 500rpx;
		font-size: 26rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 60rpx;
		margin-bottom: 200rpx;
	}

	.tui-del {
		padding: 24rpx;
	}
	
	
	.tui-cells-textarea{
		border: 2prx solid #333;
	}
	.tui-textarea{
		border: 2prx solid #333;
	}
	.uni-textarea-textarea{
		border: 2prx solid #333;
	}
	
	.tui-textarea-my{
		border:1px solid #ddd;border-radius:5px;padding:10px;width: 94%;
	}
	
	.qr-code{
		width: 750rpx;
		height: 750rpx;
	}
</style>
